<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>防抖函数</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body,
			html {
				height: 100%;
				overflow: hidden;
			}

			#scrollWrap {
				height: 100%;
				overflow-y: auto;
			}

			.output {
				background: #00BFFF;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="scrollWrap">
			<div id='con' style="height: 3000px;"></div>
		</div>


		<script type="text/javascript">
			// throttle 简易版 立即执行
			// 我们可以使用时间戳，当触发事件的时候，
			// 我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0)，
			// 如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，
			// 如果小于，就不执行
			function throttle(fn, wait) {

				var context = null;
				var args = null;
				var prev = 0;

				return function() {
					args = arguments;
					context = this;
					var now = +new Date();
					if (now - prev > wait) {
						fn.apply(context, args);
						prev = now;
					}
				}
			}
		</script>
		<script type="text/javascript">
			var scrollWrap = document.querySelector("#scrollWrap");

			function output(e) {
				console.log(e.target.scrollTop);
			}

			scrollWrap.addEventListener('scroll', throttle(output, 50))
		</script>
	</body>
</html>
